<template>
  <view>
    <view class="home_page">
      <!-- 背景图 -->
      <image
        src="https://mkservice.mk-iot.com/subFile/mk2240/bg_tab.png"
        class="bg_tab"
      />
      <!-- 周按钮 -->
      <view class="reservation">
        <!-- <view class="reservation_name">预约醒发</view> -->
        <weekbutton
          :weekReservation="indexAllData.weekReservation"
          :equipmentNo="equipmentNo"
          :equipmentTypeId="equipmentTypeId"
        ></weekbutton>

        <!-- <weekbutton2
          :weekReservation="indexAllData.weekReservation"
          :equipmentNo="equipmentNo"
          :equipmentTypeId="equipmentTypeId"
        ></weekbutton2> -->
      </view>
      <view class="home_content">
        <!-- 列表包裹所有区域 -->
        <scroll-view
          class="scroll-list"
          scroll-y="true"
          :style="'height:' + clientHeight + 'px;'"
        >
          <!-- 设备状态区域 -->
          <view class="device_state">
            <!-- 背景图片 -->
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/bg_block.png"
              class="bg_block"
            />
            <!-- 设备标题 -->
            <view class="device_title">
              <image
                src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
                class="title_iocn"
              />
              <view class="device_name">
                <text style="color: #000">设备状态：</text>
                <text>{{
                  indexAllData.defrostThermErro == 0 ||
                  indexAllData.defrostThermErro == null
                    ? ''
                    : '除霜热电耦断开 '
                }}</text>
                <text>{{
                  indexAllData.freezingAndreErro == 0 ||
                  indexAllData.freezingAndreErro == null
                    ? ''
                    : '冷冻冷藏温度超限 '
                }}</text>
                <text>{{
                  indexAllData.tempAndHumErro == 0 ||
                  indexAllData.tempAndHumErro == null
                    ? ''
                    : '温湿度通讯错误 '
                }}</text>
                <text>{{
                  indexAllData.tempExceedingErro == 0 ||
                  indexAllData.tempExceedingErro == null
                    ? ''
                    : '温度超限 '
                }}</text>
                <text>{{
                  indexAllData.waterShortageErro == 0 ||
                  indexAllData.waterShortageErro == null
                    ? ''
                    : '缺水报警 '
                }}</text>
              </view>
            </view>
            <!-- 设备时间 -->
            <view class="device_time">
              <view class="time_title"> 设备时间 </view>
              <view class="time">
                <view class="hour_divide">{{ currTime }}</view>
                <text class="spot">:</text>
                <view class="hour_divide">{{ currMin }}</view>
              </view>
            </view>
            <!-- 设备状态图 -->
            <view class="status_Value">
              <view class="machine_temp">
                <l-circularProgress
                  progressColor="#FFA36F"
                  :lineWidth="10"
                  fontSize="16"
                  boxWidth="80"
                  boxHeight="80"
                  fontColor="#000"
                  gradualColor="#FF8140"
                  :percent="indexAllData.compTemp"
                >
                </l-circularProgress>

                <text class="machine_text">压缩机温度(℃)</text>
              </view>
              <view class="machine_temp">
                <l-circularProgress
                  progressColor="#9BD478"
                  :lineWidth="10"
                  fontSize="16"
                  boxWidth="80"
                  boxHeight="80"
                  fontColor="#000"
                  gradualColor="#63CE80"
                  :percent="indexAllData.currHumidity"
                >
                </l-circularProgress>
                <text class="machine_text">当前湿度(RH)</text>
              </view>
              <view class="machine_temp">
                <l-circularProgress
                  progressColor="#36A8FF"
                  :lineWidth="10"
                  fontSize="16"
                  boxWidth="80"
                  boxHeight="80"
                  fontColor="#000"
                  gradualColor="#008DF9"
                  :percent="indexAllData.currTemp"
                >
                </l-circularProgress>
                <text class="machine_text">当前温度(℃)</text>
              </view>
            </view>
          </view>
          <!-- 温度曲线区域 -->
          <view class="temp_curve">
            <view class="temp_curve_title">
              <image
                class="title_iocn"
                src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
              />
              <view class="device_name"> 温度曲线 </view>
            </view>
            <!-- 温度曲线文字 -->
            <view class="curve_text_img">
              <view class="curve_text">
                <text class="wait">等待</text>
                <text class="freezing">冷冻</text>
                <text class="cold_storage">冷藏</text>
                <text class="proof_one">醒发1</text>
                <text class="proof_two">醒发2</text>
              </view>
              <!-- 温度曲线图片 -->
              <image
                class="curve_img"
                :src="stateImgUrl"
              />
            </view>
            <!-- 文字开关扭 -->
            <view class="floor_display">
              <view class="heating_tube">
                <image
                  class="tube_img"
                  :src="
                    indexAllData.heatTube == 1
                      ? 'https://mkservice.mk-iot.com/subFile/mk2240/bright.png'
                      : 'https://mkservice.mk-iot.com/subFile/mk2240/notbright.png'
                  "
                />
                <view class="tube_text">发热管</view>
              </view>
              <view class="heating_tube">
                <image
                  class="tube_img"
                  :src="
                    indexAllData.compressorOutput == 1
                      ? 'https://mkservice.mk-iot.com/subFile/mk2240/bright.png'
                      : 'https://mkservice.mk-iot.com/subFile/mk2240/notbright.png'
                  "
                />
                <view class="tube_text">压缩机</view>
              </view>
              <view class="heating_tube">
                <image
                  class="tube_img"
                  :src="
                    indexAllData.spoutOutput == 1
                      ? 'https://mkservice.mk-iot.com/subFile/mk2240/bright.png'
                      : 'https://mkservice.mk-iot.com/subFile/mk2240/notbright.png'
                  "
                />
                <view class="tube_text">电磁阀</view>
              </view>
              <view class="heating_tube">
                <image
                  class="tube_img"
                  :src="
                    indexAllData.light == 1
                      ? 'https://mkservice.mk-iot.com/subFile/mk2240/bright.png'
                      : 'https://mkservice.mk-iot.com/subFile/mk2240/notbright.png'
                  "
                />
                <view class="tube_text">灯</view>
              </view>
              <view class="heating_tube">
                <image
                  class="tube_img"
                  :src="
                    indexAllData.defrostOutput == 1
                      ? 'https://mkservice.mk-iot.com/subFile/mk2240/bright.png'
                      : 'https://mkservice.mk-iot.com/subFile/mk2240/notbright.png'
                  "
                />
                <view class="tube_text">除霜</view>
              </view>
            </view>
          </view>
          <!-- 功能服务 -->
          <view class="functional_services">
            <view class="temp_curve_title">
              <image
                class="title_iocn"
                src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
              />
              <view class="device_name"> 功能服务 </view>
            </view>
            <view class="functional_btn">
              <!-- 手动 -->
              <view class="big_controlbtn">
                <view
                  class="auto_manual_img"
                  @tap="
                    isRendering ? '' : clickAutoManualBtn(indexAllData.currMode)
                  "
                  :style="
                    indexAllData.currMode == 3
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/automatic.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/manual.png)'
                  "
                >
                  <view class="auto_manual">
                    <text
                      :style="indexAllData.currMode == 3 ? 'color: #fff' : ''"
                    >
                      {{ indexAllData.currMode == 3 ? '自动' : '手动' }}</text
                    >
                    <text
                      class="auto_text"
                      :style="indexAllData.currMode == 3 ? 'color: #fff' : ''"
                    >
                      {{ indexAllData.currMode == 3 ? '手动' : '自动' }}</text
                    >
                  </view>
                </view>
                <!-- 照明 -->
                <view
                  v-if="lightState == 0"
                  class="lamp_switch_img"
                  @touchstart="isRendering ? '' : handleTouchStart()"
                  @touchend="isRendering ? '' : handleTouchEnd()"
                  :style="
                    indexAllData.light == 1
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_off.png)'
                  "
                >
                  <view class="lamp_text">
                    <text :style="indexAllData.light == 1 ? 'color: #fff;' : ''"
                      >照明</text
                    >
                  </view>
                </view>
                <view
                  v-if="lightState != 0"
                  class="lamp_switch_img"
                  @tap="isRendering ? '' : clickLightBtn()"
                  :style="
                    indexAllData.light == 1
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_off.png)'
                  "
                >
                  <view class="lamp_text">
                    <text :style="indexAllData.light == 1 ? 'color: #fff;' : ''"
                      >照明</text
                    >
                  </view>
                </view>
                <!-- 开关 -->
                <view
                  class="lamp_switch_img"
                  @tap="
                    isRendering ? '' : clickSwitchBtn(indexAllData.currMode)
                  "
                  :style="
                    indexAllData.currMode >= 1
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_switch_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_switch_off.png)'
                  "
                >
                  <view class="switch_text">
                    <text
                      :style="indexAllData.currMode >= 1 ? 'color: #fff;' : ''"
                      >开关</text
                    >
                  </view>
                </view>
                <!-- 冷冻 -->
                <view
                  class="small_control_img"
                  @tap="
                    isRendering
                      ? ''
                      : clickFreezingBtn(
                          indexAllData.currMode,
                          indexAllData.currState
                        )
                  "
                  :style="
                    indexAllData.currState == 1
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_off.png)'
                  "
                >
                  <view class="freezing_text">
                    <text
                      :style="indexAllData.currState == 1 ? 'color: #fff;' : ''"
                      >冷冻</text
                    >
                  </view>
                </view>
                <!-- 冷藏 -->
                <view
                  class="small_control_img"
                  @tap="
                    isRendering
                      ? ''
                      : clickStorageBtn(
                          indexAllData.currMode,
                          indexAllData.currState
                        )
                  "
                  :style="
                    indexAllData.currState == 2
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_cold_storage_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_cold_storage_off.png)'
                  "
                >
                  <view class="storage_text">
                    <text
                      :style="indexAllData.currState == 2 ? 'color: #fff;' : ''"
                      >冷藏</text
                    >
                  </view>
                </view>
                <!-- 醒发1 -->
                <view
                  class="small_control_img"
                  @tap="
                    isRendering
                      ? ''
                      : clickProofingOneBtn(
                          indexAllData.currMode,
                          indexAllData.currState
                        )
                  "
                  :style="
                    indexAllData.currState == 3
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_proofing_one_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_proofing_one_off.png)'
                  "
                >
                  <view class="proofing_text_one">
                    <text
                      :style="indexAllData.currState == 3 ? 'color: #fff;' : ''"
                      >醒发1</text
                    >
                  </view>
                </view>
                <!-- 醒发2 -->
                <view
                  class="small_control_img"
                  @tap="
                    isRendering
                      ? ''
                      : clickProofingTwoBtn(
                          indexAllData.currMode,
                          indexAllData.currState
                        )
                  "
                  :style="
                    indexAllData.currState == 4
                      ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_proofing_two_on.png)'
                      : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_proofing_two_off.png)'
                  "
                >
                  <view class="proofing_text_two">
                    <text
                      :style="indexAllData.currState == 4 ? 'color: #fff;' : ''"
                      >醒发2</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 运行电压 -->
          <view class="voltage_content">
            <view class="minimum_voltage">
              <image
                class="voltage_img"
                src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
              />
              <view class="voltage_text">
                <text class="minvoltage_value"
                  >{{
                    indexAllData.minvoltage == null
                      ? '0'
                      : indexAllData.minvoltage
                  }}V</text
                >
                <text class="voltage_title">运行时最低电压</text>
              </view>
            </view>
            <view class="current_voltage">
              <image
                class="voltage_img"
                src="https://mkservice.mk-iot.com/subFile/mk2240/voltage_icon.png"
              />
              <view class="voltage_text">
                <text class="current_voltage_value"
                  >{{
                    indexAllData.currVoltage == null
                      ? '0'
                      : indexAllData.currVoltage
                  }}V</text
                >
                <text class="voltage_title">当前电压</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- loading组件 -->
    <leeLoading
      :animateTxt="leeLoading.animateTxt"
      :type="leeLoading.type"
      :shadowBg="leeLoading.shadowBg"
      :show="leeLoading.show"
    ></leeLoading>
    <!--底部tab子组件-->
    <navtabar :selected="index"></navtabar>
  </view>
</template>

<script>
  let timer
  // 控制类型写死
  const CmdType = {
    PowerSwitch: 1,
    LightSwitch: 2,
    FreezeSwitch: 3,
    ChillSwitch: 4,
    XF1Switch: 5,
    XF2Switch: 6,
    Booking: 7,
    AutoOrManual: 8,
    DeviceStatus: 9,
    DeviceTime: 10,
    AutoCurve: 11,
    InnerReference: 12,
    Reset: 13,
    APPSendOTAPackage: 14,
  }
  const CLOSE = false
  const OPEN = true
  // 组件
  import leeLoading from '../components/StarLee-loading/leeLoading.vue'
  import navtabar from '../components/proofing-tabbar/index.vue'
  import weekbutton from '../components/week-button/index.vue'
  // 我自己写的button

  // 工具方法
  import parsingData from '../util/parsingData'
  import getPrefixAndControl from '../util/getPrefixAndControl'
  import getdateTime from '../../utils/getdateTime'
  // 协议变量和方法
  import { MQTT_IP, MQTT_OPTIONS } from '@/utils/mqtt.js'
  var Paho = require('../../utils/paho-mqtt')
  // 配置方法
  import { listConfig } from '@/api/system/config/config.js'
  export default {
    components: {
      navtabar,
      weekbutton,
      leeLoading,
      // weekbutton2,
    },
    data() {
      return {
        leeLoading: {
          show: false,
          type: 'rotate3',
          shadowBg: '',
          animateTxt: true,
        },
        isRendering: false, //防止重复点击
        clientHeight: 0,
        index: 0,
        // 设备编号和id
        equipmentNo: uni.getStorageSync('equipmentNo'), //uni.getStorageSync("equipmentNo"),
        equipmentTypeId: uni.getStorageSync('equipmentTypeId'), //uni.getStorageSync("equipmentTypeId"),
        subTopic: uni.getStorageSync('subTopic'),
        // 路径变量
        stateImgUrl:
          'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg',
        // 全部数据
        indexAllData: '',
        lightState: '',
        realTime: null,
        timers: null,
        timeout: null,
        compTemp: '',
        currTemp: '',
        currTime: '',
        currMin: '',
        client: null,

        // 样式整理
        compressorColor: {
          '0%': '#FFA36F',
          '100%': '#FF8140',
        },
        humidityColor: {
          '0%': '#9BD478',
          '100%': '#63CE80',
        },
        tempColor: {
          '0%': '#36A8FF',
          '100%': '#008DF9',
        },
      }
    },
    onLoad() {
      var that = this
      // 滚动操作高度设置
      uni.getSystemInfo({
        success: function (res) {
          let screenHeight = uni.getSystemInfoSync().windowHeight //获取屏幕高度
          // 通过query 获取其余盒子的高度
          let query = uni.createSelectorQuery().in(that)
          //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
          query.exec((res) => {
            let scrollHeight = screenHeight - 120
            that.clientHeight = scrollHeight
          })
        },
      })
      uni.showLoading({ title: '数据加载中...', mask: true })
      //先确认获取数据下发的状态
      this.getIndexData()
      //延迟一秒钟去获取数据
      setTimeout(async () => {
        //链接mqtt
        this.connect()
      }, 1000)
      //15秒后没关闭就自动关闭
      this.timers = setTimeout(() => {
        // 隐藏loading
        uni.hideLoading()
      }, 15000)
    },
    onUnload() {
      clearInterval(this.realTime)
      clearTimeout(this.timers)
      if (this.client != null) {
        this.client.disconnect()
        this.client = null
      }
    },
    mounted() {
      //设置定时器，一秒钟改变当前时间
      timer = setInterval(() => {
        const nowtime = getdateTime.getNowTime()
        this.currTime = nowtime.hour
        this.currMin = nowtime.minute
      }, 1000)
    },
    //下拉刷新
    onPullDownRefresh() {
      this.indexAllData = ''
      this.lightState = ''
      clearInterval(this.realTime)
      clearTimeout(this.timers)
      uni.showLoading({ title: '数据加载中...', mask: true })
      this.getIndexData()
    },
    // 组件销毁时关闭定时器
    beforeDestroy() {
      clearInterval(timer)
      clearTimeout(this.timers)
    },
    methods: {
      // 每2s执行下发数据和状态
      getIndexData() {
        this.realTime = setInterval(async () => {
          //进入界面链接mqtt后自动订阅
          const success = await getPrefixAndControl.getConfigList(
            this.equipmentTypeId,
            this.equipmentNo,
            CmdType.DeviceTime
          )
          console.log('确定数据下发的返回状态2', success)
          if (success.code != 200) {
            this.$modal.msgError('下发失败')
          }
        }, 2000)
      },
      //mqtt链接方法
      connect() {
        try {
          // 使用 thant 代替 this，避免在回调函数中 this 的指向问题
          const thant = this
          // 生成客户端的随机ID
          this.client = new Paho.Client(
            MQTT_IP,
            'SERVER_' +
              Math.floor(Math.random() * 999) +
              1 +
              '_' +
              thant.equipmentNo
          )
          // 连接参数 wss://mk-iot.com/mqttwss SERVER_6581_2D29641BA46862E4
          console.log(
            '连接参数',
            MQTT_IP,
            'SERVER_' +
              Math.floor(Math.random() * 999) +
              1 +
              '_' +
              thant.equipmentNo
          )
          //后面这个字符串可以用一个随机字符串方法随机生成
          var connectOptions = {
            timeout: MQTT_OPTIONS.timeout, // 连接超时时间
            useSSL: MQTT_OPTIONS.useSSL, // 是否使用 SSL
            cleanSession: MQTT_OPTIONS.cleanSession, //实现QoS>0必须设置为false，代表不清除，是持久会话
            keepAliveInterval: MQTT_OPTIONS.keepAliveInterval, // 保持连接的间隔时间
            reconnect: MQTT_OPTIONS.reconnect, //意外断开之后会重连，第一次1秒后重连，往后每次翻倍直到2分钟，后续保持2分钟
            mqttVersion: MQTT_OPTIONS.mqttVersion,
            userName: MQTT_OPTIONS.username, // 用户名
            password: MQTT_OPTIONS.password, // 密码
            onSuccess: function () {
              thant.client.onMessageArrived = function (msg) {
                console.log('接受的连接的原始数据', msg)
                const data = JSON.parse(
                  msg.payloadString.replace(/\u0000*$/, '')
                )
                console.log('接收JSON.parse方法处理payloadString的数据', data)
                if (data != null) {
                  data.Data.forEach((item, index) => {
                    if (item.Cmd == 9) {
                      // 解析mqtt的数据，到页面展示去
                      thant.indexAllData = parsingData.getNumBycommand(
                        item.Cmd,
                        item.Value
                      )

                      console.log(
                        '打印页面数据indexALLdata',
                        thant.indexAllData
                      )
                      uni.setStorageSync(
                        'controlPanelVesion',
                        thant.indexAllData.controlPanelVesion
                      )
                      uni.setStorageSync(
                        'upperComputerVesion',
                        thant.indexAllData.upperComputerVesion
                      )
                      if (thant.indexAllData.communicationState != 1) {
                        thant.$modal.msgError('通讯错误')
                        clearInterval(this.realTime)
                        uni.stopPullDownRefresh()
                        uni.hideLoading({
                          noConflict: true,
                        })
                        return
                      }
                      if (thant.indexAllData.connt == false) {
                        thant.$modal.msg('设备订阅已断开，请重启设备')
                        clearInterval(this.realTime)
                        uni.stopPullDownRefresh()
                        uni.hideLoading({
                          noConflict: true,
                        })
                        return
                      }
                      if (thant.indexAllData.currState == 1) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_two.svg'
                      } else if (thant.indexAllData.currState == 2) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_three.svg'
                      } else if (thant.indexAllData.currState == 3) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_four.svg'
                      } else if (thant.indexAllData.currState == 4) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_five.svg'
                      }
                    }
                    if (item.Cmd == 12) {
                      const res = parsingData.getNumBycommand(
                        item.Cmd,
                        item.Value
                      )
                      thant.lightState = res.lightDelay
                    }
                    if (thant.indexAllData !== '' && thant.lightState !== '') {
                      thant.empty()
                      uni.hideLoading()
                    }
                  })
                }
              }
              thant.client.subscribe(thant.subTopic, {
                qos: 1,
              })
            },
            onFailure: function (option) {
              uni.showToast({
                title: option,
                icon: 'error',
              })

              // this.client.connect(connectOptions)
              console.log('连接失败的报错', option)
            },
          }
          this.client.connect(connectOptions)
        } catch (error) {
          this.$modal.msgError('连接错误')
        }
      },

      // 点击优化
      //点击自动手动操作
      clickAutoManualBtn: async function (currMode) {
        //防止重复点击
        const week = this.indexAllData.weekReservation
        if (
          week.scheduleFridayState == 0 &&
          week.scheduleMondayState == 0 &&
          week.scheduleSaturdayState == 0 &&
          week.scheduleSundayState == 0 &&
          week.scheduleThursdayState == 0 &&
          week.scheduleTuesdayState == 0 &&
          week.scheduleWednesdayState == 0
        ) {
          this.$modal.msgError('请先设置预约星期')
        } else {
          this.preventClick(this.isRendering)
          if (currMode == 3) {
            //点击开启加载
            this.loadingClick()
            // 调用机器方法控制开关
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.AutoOrManual,
              CLOSE
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          } else if (currMode >= 1) {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.AutoOrManual,
              OPEN
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          }
        }
      },
      //点击照明开关
      clickLightBtn: async function () {
        //防止重复点击
        this.preventClick(this.isRendering)
        //点击开启加载
        this.loadingClick()
        const success = await getPrefixAndControl.controlCmd(
          this.equipmentTypeId,
          this.equipmentNo,
          CmdType.LightSwitch,
          OPEN
        )
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
      //长按照明开关
      handleTouchStart: async function () {
        this.loadingClick()
        const success = await getPrefixAndControl.controlCmd(
          this.equipmentTypeId,
          this.equipmentNo,
          CmdType.LightSwitch,
          OPEN
        )
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
      //照明开关抬起
      handleTouchEnd: async function () {
        const success = await getPrefixAndControl.controlCmd(
          this.equipmentTypeId,
          this.equipmentNo,
          CmdType.LightSwitch,
          CLOSE
        )
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
      //点击开关触发按钮
      clickSwitchBtn: async function (currMode) {
        //防止重复点击
        this.preventClick(this.isRendering)
        if (currMode >= 1) {
          //点击开启加载
          this.loadingClick()
          const success = await getPrefixAndControl.controlCmd(
            this.equipmentTypeId,
            this.equipmentNo,
            CmdType.PowerSwitch,
            CLOSE
          )
          if (success.code != 200) {
            this.$modal.msgError('下发失败')
          } else {
            this.stateImgUrl =
              'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
          }
        } else {
          //点击开启加载
          this.loadingClick()
          const success = await getPrefixAndControl.controlCmd(
            this.equipmentTypeId,
            this.equipmentNo,
            CmdType.PowerSwitch,
            OPEN
          )
          if (success.code != 200) {
            this.$modal.msgError('下发失败')
          }
        }
      },
      //点击冷冻
      clickFreezingBtn: async function (currMode, currState) {
        //防止重复点击
        this.preventClick(this.isRendering)
        if (currMode == 1 || currMode == 2) {
          if (currState == 1) {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.FreezeSwitch,
              CLOSE
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          } else {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.FreezeSwitch,
              OPEN
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            }
          }
        }
      },
      //点击冷藏
      clickStorageBtn: async function (currMode, currState) {
        //防止重复点击
        this.preventClick(this.isRendering)
        if (currMode == 1 || currMode == 2) {
          if (currState == 2) {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.ChillSwitch,
              CLOSE
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          } else {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.ChillSwitch,
              OPEN
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            }
          }
        }
      },
      //点击醒发1
      clickProofingOneBtn: async function (currMode, currState) {
        //防止重复点击
        this.preventClick(this.isRendering)
        if (currMode == 1 || currMode == 2) {
          if (currState == 3) {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.XF1Switch,
              CLOSE
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          } else {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.XF1Switch,
              OPEN
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            }
          }
        }
      },
      //点击醒发2
      clickProofingTwoBtn: async function (currMode, currState) {
        //防止重复点击
        this.preventClick(this.isRendering)
        if (currMode == 1 || currMode == 2) {
          if (currState == 4) {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.XF2Switch,
              CLOSE
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            } else {
              this.stateImgUrl =
                'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg'
            }
          } else {
            //点击开启加载
            this.loadingClick()
            const success = await getPrefixAndControl.controlCmd(
              this.equipmentTypeId,
              this.equipmentNo,
              CmdType.XF2Switch,
              OPEN
            )
            if (success.code != 200) {
              this.$modal.msgError('下发失败')
            }
          }
        }
      },

      //防止多次点击共用方法
      preventClick(isClick) {
        if (!isClick) {
          this.isRendering = true
          setTimeout(() => {
            this.isRendering = false
          }, 500)
        }
      },
      // 动画方法
      loadingClick() {
        const thant = this
        thant.leeLoading.show = true
        thant.timeout = setTimeout(function () {
          thant.leeLoading.show = false
          thant.$modal.msgError('操作未成功')
        }, 5000)
      },
      //清除
      empty() {
        clearInterval(this.realTime)
        clearTimeout(this.timeout)
        this.leeLoading.show = false
        uni.stopPullDownRefresh()
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #f6f6f6;
  }

  .home_page {
    position: relative;
  }

  .bg_tab {
    width: 100%;
    height: 460rpx;
  }

  .reservation {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .reservation_name {
    margin-left: 25rpx;
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 10rpx;
    color: white;
  }

  .home_content {
    position: absolute;
    width: 100%;
    top: -50rpx;
    margin-top: 180rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .scroll-list {
    width: auto;
    overflow: scroll;
  }

  .device_state {
    width: 710rpx;
  }

  .bg_block {
    width: 100%;
    height: 280rpx;
  }

  .device_title {
    position: absolute;
    top: 0;
    margin-top: 20rpx;
    margin-left: 32rpx;
    display: flex;
    align-items: center;
  }

  .title_iocn {
    width: 24rpx;
    height: 24rpx;
    display: block;
  }

  .device_name {
    margin-left: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
    width: 260rpx;
    word-wrap: break-word;
  }

  .device_name text {
    color: red;
  }

  .device_time {
    position: absolute;
    top: 0;
    left: 60%;
    display: flex;
    align-items: center;
    margin-top: 15rpx;
  }

  .time_title {
    font-weight: bold;
    font-size: 28rpx;
    color: white;
  }

  .time {
    display: flex;
    margin-left: 20rpx;
  }

  .hour_divide {
    background-color: white;
    height: 50rpx;
    width: 50rpx;
    text-align: center;
    line-height: 50rpx;
    border-radius: 10rpx;
    font-weight: bold;
  }

  .spot {
    display: block;
    color: white;
    margin: 10rpx 10rpx;
  }

  .status_Value {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
    width: 710rpx;
    margin-top: 70rpx;
  }

  .machine_temp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .machine_text {
    font-size: 26rpx;
    font-weight: bold;
  }

  .temp_curve {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 0px 5rpx 3rpx 0px rgba(244, 237, 235, 0.3),
      3rpx 4rpx 3rpx 0px rgba(212, 219, 236, 0.3);
    border-radius: 24rpx;
    margin-top: 10rpx;
  }

  .temp_curve_title {
    padding-top: 20rpx;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
  }

  .curve_text_img {
    text-align: center;
  }

  .curve_text {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin: 20rpx 10rpx 0px 30rpx;
  }

  .wait {
    color: #009bf9;
    font-weight: bold;
    font-size: 28rpx;
  }

  .curve_img {
    width: 654rpx;
    height: 100rpx;
  }

  .floor_display {
    font-size: 24rpx;
    display: flex;
    justify-content: space-evenly;
  }

  .heating_tube {
    display: flex;
    align-items: center;
  }

  .tube_img {
    width: 48rpx;
    height: 32rpx;
  }

  .functional_services {
    width: 710rpx;
    height: 495rpx;
    background: #ffffff;
    box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
      3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
    border-radius: 24rpx;
    margin-top: 20rpx;
  }

  .functional_btn {
    background-color: #fff;
    position: relative;
    border-radius: 24rpx;
  }

  .big_controlbtn {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .auto_manual_img {
    width: 230rpx;
    height: 230rpx;
    background-size: 100% 100%;
    z-index: 100;
  }

  .lamp_switch_img {
    width: 230rpx;
    height: 230rpx;
    background-size: 100% 100%;
  }

  .small_control_img {
    width: 174rpx;
    height: 200rpx;
    background-size: 100% 100%;
  }

  .auto_manual {
    position: absolute;
    font-size: 32rpx;
    font-weight: bold;
    top: 8%;
    left: 5%;
    width: 80rpx;
  }

  .lamp_text {
    position: absolute;
    font-size: 32rpx;
    font-weight: bold;
    top: 7%;
    left: 42%;
    width: 80rpx;
  }

  .switch_text {
    position: absolute;
    font-size: 32rpx;
    font-weight: bold;
    top: 7%;
    left: 75%;
    width: 80rpx;
  }

  .auto_text {
    font-size: 26rpx;
    color: gray;
    padding-top: 80rpx;
    display: block;
  }

  .proofing_text_two,
  .proofing_text_one,
  .storage_text,
  .freezing_text {
    position: absolute;
    top: 62%;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 30rpx;
  }

  .voltage_content {
    width: 710rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
      3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
    border-radius: 24rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
  }

  .minimum_voltage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 36rpx;
  }

  .voltage_img {
    width: 33rpx;
    height: 33rpx;
  }

  .voltage_text {
    margin-left: 18rpx;
  }

  .minvoltage_value {
    display: block;
    font-size: 40rpx;
    font-weight: bold;
  }

  .voltage_title {
    display: block;
    font-size: 24rpx;
    color: gray;
    margin-top: 10rpx;
  }

  .current_voltage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 36rpx;
  }

  .current_voltage_value {
    display: block;
    font-size: 40rpx;
    font-weight: bold;
    color: #00a4f9;
  }
</style>
